
/**
 * Add selectors for each registered theme and apply theme variables to the provided block
 */
//noinspection LessUnresolvedVariable
.theme( @block ) {
	.loop( @i, @n ) when( @i <= @n ) {
		@name: extract( @THEMES, @i );
		@theme: ~"THEME-@{name}";
		@theme-ruleset: @@theme;

		html.theme-@{name} & {
			// apply the theme ruleset (variables container)
			@theme-ruleset();
			// rulesets don't return variables, so we need to use a mixin for that
			.apply-theme-variables();
			// apply the passed block
			@block();
		}

		.loop( ( @i + 1 ), @n );
	}
	.loop( 1, length( @THEMES ) );
}


/**
 * Mix theme colors to avoid transparent colors when possible
 */
//noinspection LessUnresolvedVariable
.theme-mix( @property: color, @color: @theme-text-color, @background: @theme-background, @important: false ) {
	@c: mix( fade( @color, 100% ), fade( @background, 100% ), unit( ( 100 * alpha( @color ) ), percent ) );

	.apply() when ( @important = true ) {
		@{property}: @c !important;
	}
	.apply() when ( default() ) {
		@{property}: @c;
	}
	.apply();
}

//noinspection LessUnresolvedVariable
.theme-mix-color( @color: @theme-text-color, @background: @theme-background, @important: false ) {
	.theme-mix( color, @color, @background, @important );
}

//noinspection LessUnresolvedVariable
.theme-color-and-background( @color: @theme-text-color, @background: @theme-background ) {
	background: @background;
	.theme-mix-color( @color, @background );
}
